如果我們想要在 App.vue 執行兩個 <router-view> 是否可行 ?
答案是可以的

我們先到 App.vue 在原先的 <router-view> 外圍增加一個 .container 來增加最大寬的限制，之後在外面也新增一個 <router-view> 並給予 name 屬性:

<template>
    <div id="app">
        <nav>...</nav>
        <router-view name="menu"></router-view>
        <div class="container">
            <router-view></router-view>
        </div>
    </div>
</template>

接著我們把 page.vue 另存新檔成 menu.vue
在 page.vue 留下:

<template>
    <div class="hello">
        <div class="card" style="width: 18rem;">
            <router-view></router-view>
        </div>
    </div>
</template>

在 menu.vue 留下:

<template>
    <div class="hello">
        <ul class="nav">
            <li class="nav-item">
                <router-link class="nav-link" to="/page">卡片1</router-link>
            </li>
            <li class="nav-item">
                <router-link class="nav-link" to="/page/child2">卡片2</router-link>
            </li>
            <li class="nav-item">
                <router-link class="nav-link" to="/page/child3">卡片3</router-link>
            </li>
        </ul>
    </div>
</template>

這樣做的用意，是本來在 page 下的卡片選單移到 menu.vue 去，且只有在 page 頁下會呈現
接著我們回到 router/index.js 載入 menu.vue

import Menu from '@/components/page/menu'

接著在下方的 export 的 page 元件路徑修改一下，主要把 component 改成 components 可以用物件的型式掛載多個元件:

export default new VueRouter({
    routes: [
        {
            name: '首頁',
            path: '/index',
            component: Home,
        },
        {
            name: '分頁',
            path: '/page',
            components: {
                default: Page,
                menu: Menu,
            },
            children: [
                {
                    name: 'child 1',
                    path: '',   
                    component: child1,
                },
                {
                    name: 'child 2',
                    path: 'child2',   
                    component: child2,
                },
                {
                    name: 'child 3',
                    path: 'child3',   
                    component: child3,
                }
            ],
        }
    ]
});

而 components 物件內的屬性的 default 是預設的元件內容，menu 則是我們剛剛把第二個 <router-view> 取名的 name 屬性，掛載的元件就是剛剛製作的 menu.vue
這樣就可以達到我們所希望的效果了